﻿<template>
    <my-dialog v-model="state.dlgVisible" :title="mtitle">
        <div class="card-header">
            <my-search-bar :tbname="tbname" v-model="search2" :excludeSearch="excludeSearch"></my-search-bar>
        </div>
        <el-checkbox-group v-if="state.isMulti" v-model="checkList"  style="width: 100%;">
            <div v-for="item in page.records" :key="item.ID" class="row">
                <div class="check_box">
                    <el-checkbox size="large" :label="item.ID">&nbsp;</el-checkbox>
                </div>
                <my-cell class="cell_box" :cfg="cell2" :formData="item" v-bind="cell2.attrs" @click="onItemCheck(item)"
                    :title="getCellTitle(item)" :label="getCellLabel(item)" :icon="getCellIcon(item)"
                    :value="getCellValue(item)" :tag="getCellTag(item)" :tags="getCellTags(item)" :links="cell2.links"
                    icon-prefix="mlist-cell-icon" :is-link="false" center />
            </div>
        </el-checkbox-group>
        <el-radio-group v-else v-model="checkOne" style="width: 100%;">
            <div v-for="item in page.records" :key="item.ID" class="row">
                <div class="check_box">
                    <el-radio size="large" :label="item.ID">&nbsp;</el-radio>
                </div>
                <my-cell class="cell_box" :cfg="cell2" :formData="item" v-bind="cell2.attrs" @click="onItemCheck(item)"
                    :title="getCellTitle(item)" :label="getCellLabel(item)" :icon="getCellIcon(item)"
                    :value="getCellValue(item)" :tag="getCellTag(item)" :tags="getCellTags(item)" 
                    icon-prefix="mlist-cell-icon" :is-link="false" center />
            </div>
        </el-radio-group>

        <el-empty v-if="page.totalCount == 0" description="没有符合条件的数据" />

        <el-pagination layout="prev,pager,next" style="padding-top: 10px" v-if="page.pageCount > 1" background
            v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize" :total="page.totalCount">
        </el-pagination>


        <template #footer>
            <!-- <el-button v-if="state.isMulti" type="primary" @click="showCart">{{ cartCount }}</el-button> -->
            <el-button @click="state.dlgVisible = false">取消</el-button>
            <el-button v-if="allowAdd" type="primary" @click="doAdd">添加</el-button>
            <el-button v-if="clearable" type="success" @click="onClear">清除</el-button>
            <el-button v-if="!hideOK" type="primary" @click="onOk">确定</el-button>
        </template>
    </my-dialog>
</template>

<script>
import { MyCell } from './main';

export default {
    name: "MySelectWinH5",
    props: {
        title: String,
        tbname: String,
        fields: String,
        search: {
            type: Object,
            default() {
                return {};
            }
        },
        clearable: Boolean,
        excludeSearch: String,
        allowAdd: Boolean,
        hideOK: Boolean,
        cell: Object,
    },
    emits: ["selected", "clear", "update:search"],
    data() {
        return {
            mtitle: "",
            state: {
                dlgVisible: false,
                isMulti: false,
            },
            page: {
                pageIndex: 1,
                pageCount: 0,
                pageSize: 10,
                totalCount: 0,
                records: [],
            },
            search2: {},
            cfg: {},
            cell2: {
                title: "",
                isCheck: true
            },
            checkList: [],
            checkOne: null,
        };
    },
    created() {
        this.search2 = this.search || {};
        if (this.tbname) {
            this.$server.getDM(this.tbname).then((res) => {
                this.cfg = res;
                this.mtitle = this.title || ((this.hideOK ? "" : "选择:") + res.title);
                this.cell2 = { ...res.cell };
                if(this.cell){
                    this.cell2 = {...this.cell};
                }
            });
        }
        else {
            this.mtitle = this.title;
        }
        
    },
    methods: {
        open(multi) {
            this.state.isMulti = multi;
            this.state.dlgVisible = true;
            this.loadData(1);
        },
        onOk() {
            var items = this.state.isMulti
                ? this.page.records.filter(x => this.checkList.includes(x.ID))
                : this.page.records.filter(x => x.ID == this.checkOne);

            if (items.length > 0) {
                this.state.dlgVisible = false;
                this.$emit("selected", items);
            }
        },
        doAdd() {
            let item = { ...this.search, ID: 0 };
            $server.dlg.create(this.tbname, 0, item).then(res => {
                this.loadData(1);
            });
        },
        onClear() {
            this.state.dlgVisible = false;
            this.$emit("clear");
        },
        loadData(pageIndex) {
            pageIndex = pageIndex || this.page.pageIndex;
            var pms = { ...this.search2 };
            this.$server
                .list(this.tbname, pageIndex, this.page.pageSize, pms)
                .then((res) => {
                    this.checkList = [];
                    this.checkOne = null;
                    this.page.totalCount = res.totalCount;
                    this.page.records = res.records;
                    this.page.pageCount = res.pageCount;
                    if(this.page.pageIndex!=res.pageIndex){
                        this.page.pageIndex = res.pageIndex;
                    }
                });
        },
        onItemCheck(item) {
            if (this.state.isMulti) {
                let ix = this.checkList.indexOf(item.ID);
                if (ix == -1) {
                    this.checkList.push(item.ID);
                } else {
                    this.checkList.splice(ix, 1);
                }
            } else {
                this.checkOne = this.checkOne != item.ID ? item.ID : null;
            }
        },
        getCellTitle(item) {
            return this.parseCellValue(item, this.cell2.title);
        },
        getCellLabel(item) {
            return this.parseCellValue(item, this.cell2.label);
        },
        getCellValue(item) {
            return this.parseCellValue(item, this.cell2.value);
        },
        getCellTag(item) {
            return this.parseCellValue(item, this.cell2.tag);
        },
        getCellTags(item) {
            if (this.cell2.tags && this.cell2.tags.startsWith("format_")) {
                return this.cell2.tags;
            }
            let tags = (this.cell2.tags || "").split(";").filter(p => p.length > 0).map(p => {
                return this.parseCellValue(item, p);
            });
            return tags.join(";");
        },
        getCellIcon(item) {
            return this.parseCellValue(item, this.cell2.icon);
        },
        parseCellValue(item, tag) {
            return this.$server.dm_format(this.cfg.columns, item, tag);
        },
    },
    watch: {
        title() {
            this.mtitle = this.title;
        },
        search() {
            this.search2 = this.search;
        },
        search2(val) {
            this.loadData(1);
        },
        "page.pageIndex": function () {
            this.loadData();
        },
        "page.pageSize": function () {
            this.loadData(1);
        }
    },
    computed: {
        cartCount() {
            if (this.checkList.length > 0) {
                return `购物车(${this.checkList.length})`
            }
            return "购物车";
        }
    }
}

</script>

<style scoped>
.row {
    display: flex;
    width: 100%;
    flex-direction: row;
}

.check_box {
    display: flex;
    width: 20px;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.cell_box {
    flex: 1;
}
</style>